<template>
  <div class="service">
    <section class="inner_banner">
      <div class="picture_container">
        <img src="../../images/commoncard/swiperCard/service.png" title="服务项目inbanner" alt="服务项目inbanner"
          class="inner_banner_pc">
      </div>
    </section>
    <div class="nav">
      <div class="center flex flex_column_center   flex_row_strat">
        <div class="flex item">
          <i class="iconfont icon-zhuye-copy"></i>当前位置：<a href="/" title="">首页</a><span
            class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a @click="currentLoactiongo()"
            title="服务项目">服务项目</a><span class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a href="javascript:;"
            title="照明电器产品检测" class="active" onclick="return false">{{ currentLoaction }}</a>
        </div>
      </div>
    </div>
    <section class="center main1 clear_float" id="leftMenuss">
      <div class="inner_left">
        <div class="center">
          <div class="left">
            <div class="left_service_monu">
              <div class="title">
                <p class="cn">服务项目</p>
                <p class="en">Service Items</p>
              </div>
              <div class="content">
                <ul>
                  <div :title="item.title" ref="letfNews" :class="{ active: item.active }"
                    v-for="(item, index) in serviceItem" :key="index" @click="clickServiceItem(item, index)">
                    <li class="flex flex_column_center hoverTips">
                      <div class="icon">
                        <div class="picture_container">
                          <img :src="iconimagetype(index)" :alt="item.title">
                          <img class="active_icon" :title="item.title" :src="iconimage(index)" v-if="item.active">

                          <img class="active_icon" v-else :src="iconimage(index)" :alt="item.title" :title="item.title">
                        </div>
                      </div>
                      {{ item.title }}
                    </li>
                  </div>
                </ul>
              </div>
            </div>
            <div class="left_tel">
              <img src="@/images/commoncard/qualityTel.png" alt="/服务质量监督ad2" title="/服务质量监督ad2">
            </div>
          </div>
        </div>
      </div>
      <div class="right" v-if="rightshow" id="rightContent">
        <div class="right_title clear_float">
          <h3>{{ rightTitle }}</h3>
        </div>
        <div class="content rightcontent" v-html="rightcontent">
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { config } from "@/common/config.js"
import scrollMixin from '@/mixins/scrollMixin';
export default {
  mixins: [scrollMixin],
  name: 'homepage',
  data() {
    return {
      config,
      serviceItem: [],
      rightTitle: '',
      rightcontent: '',
      rightshow: false,
      currentLoaction: '',
      routeParam: '',
      currentkey: 0,
      routerParam: {},
      scrollY: 0
    }
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {

        // 当路由参数变化时，执行相应的操作，比如重新加载数据等
        this.currentkey = newVal.query.index ? newVal.query.index : 0

        this.fetchRouteParams(newVal);
      },
      immediate: true,
      deep: true // 深度监听对象的变化
    }
  },
  created() {
    this.init()
  },

  // mounted() {
  //   window.addEventListener('scroll', this.handleScroll);
  //   console.log('window.scrollY', window.scrollY);
    

  // },
  // beforeDestroy() {
    // window.removeEventListener('scroll', this.handleScroll);
  // },
  // computed: {
  //   dynamicStyle() {

  //     const div = document.querySelector('#leftMenuss');
  //     const rightDiv = document.querySelector('#menuRight');
  //     if (!div) return {};
  //     const rect = div.getBoundingClientRect();
  //     const rightRect = rightDiv.getBoundingClientRect();
  //     console.log('滚动===》', this.scrollY);
  //     console.log('zuo===》', rect);
  //     console.log('右侧===》', rightRect.bottom);
      
    
  //     let topValue = "500px";
  //     console.log('Math.abs(rect.top)', rect);
  //     if (rect.top > 0) {
  //       if (rightRect.bottom < 1113) {
  //         return {
  //           position: "fixed",
  //           top:20 + 'px',
  //           overflowX: "hidden",
  //           zIndex: "1",
  //         };
  //       }
  //       topValue = `${rect.top}px`;
  //     } else if (rect.top < 0) {
  //       console.log('rightRect.height', rightRect.height);

  //       // if (rect.bottom < 1408) {
  //       //   console.log('rightRect.hei++++++>ht', rightRect);

  //       //   return
  //       // }
  //       if (Math.abs(rect.top) > rightRect.height) {
  //         return
  //       }
  //       topValue =  '20px';
  //     }

  //     return {
  //       position: "fixed",
  //       top: topValue,
  //       overflowX: "hidden",
  //       zIndex: "1",
  //     };
  //   }
  // },

  methods: {
    handleScroll() {
      this.scrollY = window.scrollY;
      
    },

    changeTitle(newTitle) {
      const to = this.$route;
      document.title = document.title = newTitle ? `${to.meta.title} - ${newTitle}` : `${to.meta.title}`;;  // Update the browser's title directly
    },
    operation() {
      window.alert('您可以通过快捷键CTRL + D 加入到收藏夹')
    },
    fetchRouteParams() {
      this.currentLoaction = this.$route.query.title; // 根据实际情况替换paramName1
      this.init()
    },
    previewPic(code) {
      return config.url + config.prefix + '/file/previewFile?code=' + code
    },
    //
    init() {
      let params = {
        tenantId: 1,
        id: 3
      }
      // 获取产品树
      this.$http.get(this.$api.serveItemApi.listPlateCatAndChildren, params).then(res => {
        if (res.code == 200) {
          let result = []
          const objArray = res.data
          this.currentLoaction = res.data[0].title
          if (objArray.length > 0) {
            for (let [index, item] of objArray.entries()) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              if (index == 0) {
                detail.active = true
              } else {
                detail.active = false
              }
              result.push(detail)
            }
          }

          this.serviceItem = result
          this.clickServiceItem(this.serviceItem[this.currentkey], this.currentkey)


        }
      })
    },
    clickServiceItem(data, index) {

      this.changeTitle(data.title)
      window.scrollTo(0, 0)
      this.$nextTick(() => {
        this.$refs.letfNews[index].classList.add('active');
        for (let i = 0; i < this.$refs.letfNews.length; i++) {
          if (i != index) {
            this.$refs.letfNews[i].classList.remove('active');
          }
        }
      });
      this.currentLoaction = data.title
      this.rightTitle = data.title
      this.getdetail(data.id)
    },
    //获取右边详情
    getdetail(data) {
      let params = {
        id: data
      }
      let _that = this
      this.$http.get(this.$api.serveItemApi.getProdInfo, params).then(res => {
        if (res.code == 200) {
          _that.rightcontent = res.data.intro
          let reg = /<table/g
          let result = reg.test(_that.rightcontent)
          if (result) {
            _that.rightcontent = _that.rightcontent.replace(/<table/g, '<table class="table-coustom-border"')
          }
          _that.rightshow = true

        }
      })
    },
    currentLoactiongo() {
      window.location.reload()
    },
    iconimage(date) {
      let preSrc
      let data
      if (date > 10) {
        data = 1
        preSrc = require('../../images/serviceItem/' + data + '.png')
      } else {
        data = date + 1
        preSrc = require('../../images/serviceItem/' + data + '.png')
      }
      return preSrc
    },
    iconimagetype(date) {
      let preSrc
      let data
      if (date > 10) {
        data = 1
        preSrc = require('../../images/serviceItem/' + data + "-" + data + '.png')
      } else {
        data = date + 1
        preSrc = require('../../images/serviceItem/' + data + "-" + data + '.png')
      }


      return preSrc
    }
  }
}
</script>
<style scoped>
@import '@/styles/index.scss';

.service .main1 {
  padding-bottom: 40px;
  margin-top: 20px;
}

.table-coustom-border {
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-border-horizontal-spacing: 1px;
  -webkit-border-vertical-spacing: 1px;

  td {
    margin: 0;
    padding: 0;

  }
}

.table-coustom-border td {
  border: 1px solid #548dd4;

}

.right {
  overflow: hidden;
  min-height: 800px !important;
}
</style>